<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
﻿   <script type="text/javascript" src="HTMLUtils.js"></script>
﻿   <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
﻿   <script type="text/javascript" src="Tips.js"></script>
﻿</head>
﻿
﻿<body>
    <span id='num-1'>2</span>
    <span id='num-2'>2</span>
    <span id='num-3'>2</span>
    <span id='num-4'>2</span>
    <span id='num-5'>21</span>
    <span id='delete-1'>我要被删除啦~</span>
    <span id='attr-1' value-1='value-1 value' value-2='value-2 value' value-3='value-3 value' value-4='value-4 value' value-5 value-6='' value-7-8='value-7-8 9'></span>
    
    <div id='click-zone'><span>点击区域</span></div>
    <div id='target-zone' style='display:none'>
    	<ul>
    		<li>1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    	</ul>
    </div>
    
    <div auto-event>
    	<span>相同事件1-1</span>
    	<span>相同事件1-2</span>
    	<span>相同事件1-3</span>
    </div>
    
    <div auto-event>
    	<span>相同事件2-1</span>
    	<span>相同事件2-2</span>
    	<span>相同事件3-3</span>
    </div>
    
    <input type='button' id="btn-id-1"  value='click btn-id-1'/>
    
    
    <div class="tips-parent">
        <span id="dom-tips-1" class="dom-tips" title="提示看看">tips1</span>
    	<span id="dom-tips-2"  class="dom-tips" title="hello tips-2">这里是tips2</span>
    </div>
    </div>
</body>
</html>
<style>
.dom-tips {
	position: relative;
	cursor: pointer;
}

.dom-tips-content {
	font-size: 12px;
	border: 1px solid #DDD;
	position: absolute !important;
	background: #fff;
	padding: 0px 10px;
	border-radius: 3px;
	margin-left: 5px;
	z-index: 1;
	height: 30px;
	line-height: 30px;
	width: 100px;
}

.dom-tips-content .dom-tips-triangle {
	display: block;
	position: absolute;
	width: 0;
	height: 0;
}

.left-triangle {
	top: 8px;
	left: -10px;
	border-top: 8px solid transparent;
	border-right: 9px solid #DDD;
	border-bottom: 5px solid transparent;
}

.right-triangle {
	top: 8px;
	left: -10px;
	border-top: 8px solid transparent;
	border-left: 9px solid #DDD;
	border-bottom: 5px solid transparent;
}
</style>

<script>
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-1',2,"+");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-2',1,"-");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-3',6,"*");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-4',-1,"+");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-5',3,"/");
(function(dom,_time){
	HTMLUtils.domContentDelete(dom,_time);
})('#delete-1',3000);
(function(dom){
	var _dom_attrs=HTMLUtils.domAttributeValues(dom);
	console.log(_dom_attrs.id);
	console.log(_dom_attrs.value_1);
})('#attr-1');

(function(event,zone,target){
	HTMLUtils.domToggle(event,zone,target);
})('click','#click-zone','#target-zone');

(function(dom,event,callback){
	HTMLUtils.domAutoBindEvent(dom,event,callback);
})('[auto-event]','click',function(e){
    var target = e.target;
	console.log(target.tagName);
	if (target.tagName === 'SPAN'){
		alert(e.target.innerHTML);
	}
});

(function(dom,event,callback){
	HTMLUtils.domAutoBindEventById(dom,event,callback);
})('btn-id-1','click',function(e){
	alert(this.getAttribute('value'));
});

(function(){
	console.log("1."+HTMLUtils.isBlank(""));//true
	console.log("2."+HTMLUtils.isBlank("    "));//true
	console.log("3."+HTMLUtils.isBlank("1"));//false
	console.log("4."+HTMLUtils.isBlank(" 1 "));//false
	console.log("5."+HTMLUtils.isBlank("12 34"));//false
	console.log("6."+HTMLUtils.isBlank(" 1 234"));//false
	
	console.log("7."+HTMLUtils.isNotBlank());
	console.log("8."+HTMLUtils.isNotBlank(""));
	console.log("9."+HTMLUtils.isNotBlank(" "));
	console.log("10."+HTMLUtils.isNotBlank("    "));
	console.log("11."+HTMLUtils.isNotBlank("1"));
	console.log("12."+HTMLUtils.isNotBlank(" 1 "));
	console.log("13."+HTMLUtils.isNotBlank("12 34"));
	console.log("14."+HTMLUtils.isNotBlank(" 1 234"));
})();

(function(){
    Tips.init({parentDom:"",tipsDom:"",triangle:""});
})();
</script>